<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">

</head>
<body>
    <div class="container">
        <!--导航栏-->
        <div class="navigationBar"></div>

        <!--对应界面-->
        <div class="col-md-10">
            <div class="col-md-12" style="border: 1px solid black">
                <div class="col-md-12" style="height: 20px"></div>

                <!--提示栏-->
                <label class="col-md-6" style="font-size: 15px; height: 25px; color: #555555" id="tip"></label>
                <label class="col-md-6" style="font-size: 15px; height: 25px; color: blue; text-align: right; cursor: pointer" id="clean" onclick="clean()">清空记录</label>

                <!--显示浏览记录-->
                <div class="col-md-12" id="browsingList"></div>

                <!--显示翻页器-->
                <div class="row">
                    <button class="col-md-2 col-md-offset-2" style="border: 1px solid black; height: 40px; text-align: center"  onmouseover=over(this) onmouseout=out(this) onclick="priorPage()">上一页</button>
                    <label class="col-md-2 col-md-offset-1" style="font-size: 20px; text-align: center" id="pageLabel">1 / 1</label>
                    <button class="col-md-2 col-md-offset-1" style="border: 1px solid black; height: 40px; text-align: center;"  onmouseover=over(this) onmouseout=out(this) onclick="nextPage()">下一页</button>
                </div>
                <div class="col-md-12" style="height: 20px"></div>

            </div>
        </div>

    </div>

    <script type="text/javascript">
        var totalNumber, page = 1, maxPage;
        let browsingList = $("#browsingList");

        // 引入导航栏
        $(".navigationBar").load("navigationBar.html", function (){
            $("#userBrowsing").css("color", "red");
        });

        // 请求得到绑定用户的历史浏览记录的总数
        $.get("/QG_PostBar/post?method=getAllBrowsingForNumber", function (data) {
            totalNumber = parseInt(data);
            $("#tip").html("历史浏览：" + totalNumber + " 条");

            if (totalNumber > 0) {
                maxPage =  Math.floor((parseInt(data)-1) / 8) + 1;
            } else {
                maxPage = 1;
            }
            $("#pageLabel").html("1 / " + maxPage);
        });

        // 请求得到历史浏览信息
        getPageBrowsing();
        function getPageBrowsing() {
            $.post("/QG_PostBar/post?method=getAllBrowsingByPage", {"page": page, "num": 8}, function (data){
                // 先清空列表
                browsingList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取到浏览对象，并添加进去
                    let post = data[key];
                    addItem(browsingList, "/QG_PostBar/post?method=getPostById&postId=" + post.postId + "&isClick=true",
                            post.postName, "简介" + post.postContent, post.userName, post.createDate);
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

        // 清空历史浏览记录
        function clean() {
            // 删除掉数据库中的巨鹿
            $.get("/QG_PostBar/post?method=cleanAllBrowsing");

            // 清空列表、修改显示
            browsingList.empty();
            $("#tip").html("历史浏览：0 条");

            // 重置页数
            page = 1;
            maxPage = 1;
            $("#pageLabel").html("1 / 1");
        }

        function priorPage() {
            if (page - 1 > 0){
                page--;
                $("#pageLabel").html(page + " / " + maxPage);
                getPageBrowsing();
            }
        }

        function nextPage() {
            if (page + 1 <= maxPage) {
                page++;
                $("#pageLabel").html(page + " / " + maxPage);
                getPageBrowsing();
            }
        }

    </script>

</body>
</html>